import React from 'react'
import Avatar from '@mui/material/Avatar';
import style from './index.module.scss';
import MyItem from '../../components/MyItem';
import Paper from '@mui/material/Paper';
import MenuList from '@mui/material/MenuList';
import MenuItem from '@mui/material/MenuItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemIcon from '@mui/material/ListItemIcon';
import Typography from '@mui/material/Typography';
import Star from '@mui/icons-material/Star';
import Person from '@mui/icons-material/Person';
import Settings from '@mui/icons-material/Settings';
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';

import {  useNavigate   } from 'react-router-dom';

export default function My() {
  const navaGate = useNavigate();

  const navaGateFun = (path) => {
    navaGate(path);
  }

  // 点击我的兼职信息
  const itemClick = (item) => {
    navaGate(`/MyData/${item.title}`)
  }

  return (
    <>
      <div className={style.content}>
        <div className={style.bg_my}>
          <img className={style.bg_my_img} src="https://sls-cloudfunction-ap-guangzhou-code-1309209904.cos.ap-guangzhou.myqcloud.com/R-C.png" alt="兼职"/>
        </div>
        <Paper className={style.head}>
            <div className={style.head_top}>
                <Avatar
                alt="Remy Sharp"
                src="/broken-image.jpg"
                style={{marginTop: '-30px'}}
                sx={{ width: 60, height: 60 }}
              />
              <div className={style.my}>
                  暂无小主信息
              </div>
            </div>
            <MyItem itemClick={itemClick}></MyItem>
        </Paper>
        <div className={style.bottom}>
        <Paper sx={{ maxWidth: '100%' }}>
          <MenuList>
            <MenuItem  onClick={() => {navaGateFun('/star')}}>
              <ListItemIcon>
                <Star style={{color: '#303133'}}  sx={{ fontSize: 18}} />
              </ListItemIcon>
              <ListItemText>我的收藏</ListItemText>
              <Typography variant="body2" color="text.secondary">
              <ArrowForwardIosIcon sx={{ fontSize: 16}}></ArrowForwardIosIcon>
              </Typography>
            </MenuItem>
            <MenuItem>
              <ListItemIcon>
                <Person style={{color: '#303133'}}  sx={{ fontSize: 18}} />
              </ListItemIcon>
              <ListItemText>我要招聘</ListItemText>
              <Typography variant="body2" color="text.secondary">
              <ArrowForwardIosIcon sx={{ fontSize: 16 }}></ArrowForwardIosIcon>
              </Typography>
            </MenuItem>
            <MenuItem onClick={() => {navaGateFun('/setting')}}>
              <ListItemIcon>
                <Settings style={{color: '#303133'}}  sx={{ fontSize: 18}} />
              </ListItemIcon>
              <ListItemText>用户设置</ListItemText>
              <Typography variant="body2" color="text.secondary">
                <ArrowForwardIosIcon sx={{ fontSize: 16 }}></ArrowForwardIosIcon>
              </Typography>
            </MenuItem>
          </MenuList>
        </Paper>
        </div>
      </div>
    </>
  )
}
